<script setup lang="ts">
import SList from '@/components/common/list/SList.vue'
import { useList } from '@/composables/list-composable'
import type { ResultData } from '@/api/service'
import type { Page } from '@/type/common/list-types'
import { invoiceListApi, importInvoiceApi } from '@/api/invoice-api'
import type { InvoiceVo } from '@/type/Invoice'
import InvoiceInfo from '@/views/invoice/InvoiceInfo.vue'
import { ref } from 'vue'
import { ElMessage, ElNotification } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'

const viewId = 'InvoiceList'
const { tableData, pageQuery, statement, total, tableLoading, search } = useList(
  viewId,
  getData,
  () => {}
)
const invoiceInfoId = ref<string | undefined>()
const invoiceInfoDialog = ref<boolean>(false)

const importAppType = ref<string>('wechat')
const importDialog = ref<boolean>(false)
const uploadRef = ref()

function getData() {
  tableLoading.value = true
  invoiceListApi(pageQuery).then((response: ResultData<Page<InvoiceVo[]>>) => {
    total.value = response.data.total
    tableData.value = response.data.modelList
    tableLoading.value = false
  })
}

function close() {
  invoiceInfoDialog.value = false
  getData()
}

// 处理文件上传
const handleUpload = (uploadFile: any) => {
  const file = uploadFile.raw
  if (!file) return
  
  importInvoiceApi(importAppType.value, file)
    .then(() => {
      ElNotification.success({
        title: '成功',
        message: '导入账单成功',
        type: 'success'
      })
      importDialog.value = false
      getData() // 刷新列表
    })
    .catch((error: any) => {
      ElMessage.error('导入失败: ' + (error.message || '未知错误'))
    })
}

// 上传前检查
const beforeUpload = (file: File) => {
  const isCSV = file.type === 'text/csv' || file.name.endsWith('.csv')
  const isLt10M = file.size / 1024 / 1024 < 10

  if (!isCSV) {
    ElMessage.error('只能上传 CSV 格式的文件!')
  }
  if (!isLt10M) {
    ElMessage.error('文件大小不能超过 10MB!')
  }
  return isCSV && isLt10M
}

const methods = {
  edit: (item: InvoiceVo) => {
    invoiceInfoId.value = item.id
    invoiceInfoDialog.value = true
  },
  add: () => {
    invoiceInfoId.value = undefined
    invoiceInfoDialog.value = true
  },
  import: () => {
    importDialog.value = true
  }
}
</script>

<template>
  <s-list
    :statement="statement"
    :data="tableData"
    :methods="methods"
    :total="total"
    :table-loading="tableLoading"
    :page-size="pageQuery.pageSize"
    @search="search"
  >
  </s-list>

  <el-dialog
    destroy-on-close
    :close-on-click-modal="false"
    v-model="invoiceInfoDialog"
    title="编辑发票信息"
    width="900"
  >
    <invoice-info :close="close" :query="{ id: invoiceInfoId }" />
  </el-dialog>

  <el-dialog
    destroy-on-close
    :close-on-click-modal="false"
    v-model="importDialog"
    title="导入账单"
    width="900"
  >
    <el-select style="margin-top: 15px" v-model="importAppType">
      <el-option label="微信" value="wechat" />
      <el-option label="支付宝" value="alipay" />
      <el-option label="京东" value="jd" />
      <el-option label="美团" value="meituan" />
    </el-select>

    <el-upload
      class="upload-demo"
      style="margin-top: 15px"
      drag
      :auto-upload="false"
      :on-change="handleUpload"
      :before-upload="beforeUpload"
      ref="uploadRef"
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        Drop file here or <em>click to upload</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          请确检查账单类型后上传 (仅支持 CSV 格式，文件大小不超过 10MB)
        </div>
      </template>
    </el-upload>
  </el-dialog>
</template>

<style scoped></style>